import { useState, memo, useRef } from 'react'

type ChildProps = {
  user: { age: number }
}

const Child = memo(({ user }: ChildProps) => {
  console.log('Child 组件更新')

  return (
    <div style={{ backgroundColor: '#abc', padding: 5 }}>
      子组件2 - 年龄： {user.age}
    </div>
  )
})

function UseRef2 () {
  const [count, setCount] = useState(0)
  const [theme, setTheme] = useState('pink')

  // const user = { age: 18 }
  // const userRef = useRef({ age: 18 })

  // 验证：对象中包含 state/props 这样的可变数据时
  // 错误演示：
  // 推荐，该情况下， 使用 useMemo Hook！！！
  const userRef = useRef({ age: count })

  console.log(userRef.current)

  return (
    <div style={{ backgroundColor: theme, padding: 10 }}>
      <button onClick={() => setTheme(theme === 'pink' ? 'white' : 'pink')}>
        切换主题
      </button>

      <h1>计数器：{count}</h1>
      <button onClick={() => setCount(count + 1)}>+1</button>

      <hr />

      {/* 子组件 */}
      <Child user={userRef.current} />
    </div>
  )
}

export default UseRef2
